<template>
  <div class="theme-list">
    <div class="theme-list__item" v-for="it in bgs" :key="it.theme" @click="handleItemClick(it)">
      <img :src="it.bg" alt />
    </div>
  </div>
</template>
<script>
import bg1 from '@/assets/chat/bg1.jpg'
import bg2 from '@/assets/chat/bg2.jpg'
import bg3 from '@/assets/chat/bg3.jpg'
export default {
  inject: ['chat'],
  data () {
    return {
      bgs: [
        { theme: 'bg1', bg: bg1 },
        { theme: 'bg2', bg: bg2 },
        { theme: 'bg3', bg: bg3 }
      ]
    }
  },
  methods: {
    handleItemClick (theme) {
      this.chat.$emit('theme.change', theme)
    }
  }
}
</script>
<style lang="scss" scoped>
.theme-list {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  .theme-list__item {
    width: 86px;
    height: 60px;
    cursor: pointer;
    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
